<template>
	<view class="content ss-m-t-50">

		<view class="top-card ss-flex-row ss-row-between ss-p-r-20">
			<view class="left ss-flex-row ss-row-left ss-col-center">
				<image :src="sheep.$url.cdn('/static/playlet/collection-data.png')" style="width: 34rpx;height: 34rpx;">
				</image>
				<view class="ju-txt ss-m-l-25 text-c-c">剧集</view>
			</view>
			<view class="right">{{sub_title}}</view>
		</view>

		<scroll-view class="scroll-section" style="white-space: nowrap;" :scroll-x="true">
			<view class="ss-flex align-center justify-start">
				<view class="section-item ss-flex align-center" v-for="(item,index) in data" :key="index"
					@click="bigClick(index)">
					<view class="section-text ss-flex flex-column justify-center align-center">
						<view :class="[bigIndex === index ? 'active' : '']">{{item.episode_title}}</view>
						<view class="section-active" v-if="bigIndex===index"></view>
					</view>
					<view class="section-line" v-if="index<(data.length-1)"></view>
				</view>
			</view>
		</scroll-view>

		<view class="items">
			<template v-for="(item,index) in groupEpisode" :key="index">
				<view class="item" :class="{'select':littleIndex==index,'unselect':littleIndex!=index}"
					@click="itemClick(index)">
					<view class="p-lock" v-if="item.lock_state === 1">
						<uni-icons type="locked" size="16" color="#fff"></uni-icons>
					</view>
					<view class="item-txt">{{item.sort}}</view>
					<image class="p-select" :src="sheep.$url.cdn('/static/playlet/p-select.png')"
						v-if="littleIndex==index"></image>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';

	import {
		ref,
		reactive,
		computed,
		nextTick,
		watch,
		toRefs
	} from 'vue';

	const littleIndex = ref(0);

	const bigIndex = ref(0)

	const emit = defineEmits(['onItemsClick', 'onDetailsClick','upPlayNum'])

	const props = defineProps({
		data: {
			type: Array,
			default: [],
		},
		id: {
			type: String,
			default: ''
		},
		sub_title:{
			type: String,
			default: ''
		},
		types: {
			type: String,
			default: 'details'
		},
		index: {
			type: Number,
			default: 0
		},
		indexTwo: {
			type: Number,
			default: 0
		},
	})

	const {
		types
	} = toRefs(props);

	watch(types, (val) => {
		if (val === 'play') {
			bigIndex.value = props.index
			littleIndex.value = props.indexTwo
		}
	}, {
		deep: true,
		immediate: true
	});

	const groupEpisode = computed(() => {
		if (props.data && props.data.length > 0) {
			let de_list = []
			if (sheep.$store('playlet').isPlay(props.id)) {
				de_list = sheep.$store('playlet').getDePlay(props.id)
			}
			return props.data[bigIndex.value].data.map(item => {
				if (de_list.includes(item.sort)) {
					item.lock_state = 2
				}
				return item
			});
		} else {
			return [];
		}

	})

	const calcAll = computed(() => {
		if (props.data && props.data.length > 0) {
			const nums = props.data.reduce((sum, item) => {
				return sum + item.data.length
			}, 0)
			return nums;
		} else {
			return 0;
		}
	})



	function itemClick(index) {
		littleIndex.value = index;
		if (types.value === 'play') {
			let sort = groupEpisode.value[littleIndex.value].sort
			emit('onItemsClick', sort)
		} else {
			if (props.data[bigIndex.value].data[littleIndex.value].lock_state === 1) {
				emit('onDetailsClick', {
					id: props.id,
					sort: props.data[bigIndex.value].data[littleIndex.value].sort
				})
			} else {
				uni.navigateTo({
					url: `/pages/playlet/play?id=${props.id}&sort=${props.data[bigIndex.value].data[littleIndex.value].sort}&subTitle=${props.sub_title}`,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						changePlayNum: function(data) {
							bigIndex.value = data.index
							littleIndex.value = data.index2
							emit('upPlayNum',data)
						},
					}
				})
			}
		}
	}

	function bigClick(index) {
		if (index === bigIndex.value) {
			return
		}

		bigIndex.value = index;


		if (index === 0) {
			littleIndex.value = 0
		} else {
			littleIndex.value = null
		}
	}

	function handlerStyle(index) {
		if (index == 0) {
			return {
				'padding-right': '20rpx',
			}
		} else {
			return {
				'padding-right': '20rpx',
				'padding-left': '20rpx',
			}
		}
	}
	const changeIndex =() => {
		bigIndex.value = 0
		littleIndex.value = 0
	}
	
	defineExpose({ changeIndex })
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.content {
		width: 100%;
		padding: 0 32rpx;
	}

	.top-card {
		.left {
			height: 60rpx;

			.ju-txt {
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				color: #FFFFFF;

				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.right {

			font-family: Source Han Sans;
			font-size: 26rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: 0.03em;
			color: #B2B2B2;

			display: flex;
			justify-content: center;
			align-items: center;
		}
	}


	.scroll-section {
		width: 100%;
		white-space: nowrap;
		margin-top: 35rpx;

		.section-item {
			height: 50rpx;

			.section-text {
				font-size: 25rpx;
				font-weight: normal;
				line-height: normal;
				color: #A4BFC4;
			}

			.section-line {
				width: 2rpx;
				height: 22rpx;
				background: #454547;
				margin: 0 20rpx;
			}

			.section-active {
				width: 20rpx;
				height: 4rpx;
				background: #E13E57;
				position: absolute;
				transform: translateY(24rpx);
			}
		}
	}

	.items {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 15rpx;
		margin-top: 46rpx;

		.item {
			width: 110rpx;
			height: 90rpx;
			border-radius: 4rpx;
			background: #2B2B31;
			position: relative;

			.item-txt {
				width: 100%;
				height: 100%;
				font-family: Source Han Sans;
				font-size: 26rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: 0.05em;
				color: #A4BFC4;

				display: flex;
				justify-content: center;
				align-items: center;
			}

			.p-select {
				position: absolute;
				bottom: 10rpx;
				right: 11rpx;
				width: 19rpx;
				height: 17rpx;
			}

			.p-lock {
				position: absolute;
				top: 5rpx;
				left: 5rpx;
			}
		}

		.select {
			color: #E13E57;
		}

		.unselect {
			color: #A4BFC4;
		}
	}


	.active {
		color: #E13E57 !important;
	}
</style>